<template>
  <div class="map-contant" :id="el">
    <slot></slot>
  </div>
</template>
<script>
  // ---------- 地图功能 --------------
  import {addDC} from "../../../utils/map/DistrictCluster/test";
  import {addMassMark} from "@/utils/map/MassMark/main";

  export default {
    data() {
      return {
        center: this.mapInfo.center,
        zoom: this.mapInfo.zoom,
        enable: this.mapInfo.enable,
        style: this.mapInfo.style,
        adcode: this.mapInfo.adcode,
        map_content: null,
        data_content: [
          {
            position: ["120.542367", "30.673453"],
            TowerCode: "bf5e6deb12e9b684a5c28ab045999dd0",
            TowerName: "桐乡塔",
          },
          {
            position: ["116.345641", "39.913238"],
            TowerCode: "bf5e6deb12e9b684a5c28ab045999dd1",
            TowerName: "月坛塔",
          },
        ],
      };
    },
    mounted() {
      let map = new AMap.Map(this.el, this.map_info);
      // ---------- 地图功能 -----------------
      // 数据
      // this.data_content = createPoints(map.getCenter(), 1000);
      // 聚合
      addDC(map, this.data_content);
      addMassMark(map, this.data_content, this);
      // ---------- 地图事件 -------------
      map.on(
          "zoomchange",
          function() {
          },
          this
      );
      map.on("resize", function(e, f) {
      });

      map.on("click", function(e) {
        let lnglat = e.lnglat;
      });
      // let ne = [148.877926, 54.207531];
      // let sw = [64.854489, 17.21442];
      // let bound =new AMap.Bounds(sw, ne);
      // map.setBounds(bound);
    },
    computed: {
      map_info: function() {
        return {
          // center: this.center, //地图中心
          // zoom: this.zoom, //地图级别
          mapStyle: this.style,
          rotateEnable: this.enable,
          dragEnable: this.enable,
          scrollWheel: this.enable,
          doubleClickZoom: this.enable,
          expandZoomRange: true,
          viewMode: "2D",
        };
      },
    },
    props: {
      el: {
        type: String,
        default: "map",
      },
      mapInfo: {
        type: Object,
        default: function() {
          return {
            center: [116.493846, 40.263609],
            zoom: 8,
            enable: true,
            // style: "amap://styles/dark",
            style: "amap://styles/73767376d1e21c535f3e909bdd72a3fa",
            adcode: 110000,
          };
        },
      },
      addfunction: {
        type: String,
        default: "feature-adcode",
      },
    },
    methods: {
      // ----------- 路由 ------------
      toTower(e) {
        let TowerCode = e.target.w.TowerCode;
        this.$router.push({name: "tower", query: {TowerCode: TowerCode}});
      },
      zoombig() {
        this.$emit("zoombig");
      },
      zoomsmall() {
        this.$emit("zoomsmall");
      },
    },
  };
</script>
<style scoped>
.map-contant {
  height: 100%;
  width: 100%;
}
</style>
